<template>
	<view class="content">
		<view>
			<!-- id="picurl" -->
			<image class="logo" src="/static/2.jpg" ref="picurl"  style="display: block"></image>
			<!--按钮样式-->
			<view style="width: 10rem;height: 2rem;background-color: #86c2dd;line-height:2rem;
				text-align: center;border-radius: 5px;margin: 0 auto;margin-top: 1rem;">
				<!-- 保存图片 -->
				<view style="text-decoration: none;color: aliceblue;font-size: 18px;" @click="downloadIamge('下载')">保存图片</view>
			</view>
			<v-button>点击我</v-button>
		</view>
	</view>
</template>

<script>
	import { VButton } from 'virtual-ui';
	export default {
		data() {
			return {
				
			}
		},
		components: {
		    VButton,
		  },
		methods: {
			// 注释部分是因为pc端下载正常 移动端下载为空  
			// 原因：移动浏览器对自动触发下载行为有更严格的限制，或者不支持通过JavaScript创建的<a>标签并触发点击事件来下载文件
			// 并非所有浏览器都支持 canvas.toDataURL() 返回的数据URL进行下载，尤其是在移动设备上。
			// 解决办法：更兼容的方法是使用 canvas.toBlob()方法生成 Blob对象，然后创建对象URL(URL.createObjectURL())来作为下载链接的 href属性值
			downloadIamge(name){
				// 创建一个新的 HTML 图像元素 <img>
				var image = new Image();
				//跨域会导致a标签在部分浏览器中会直接打开新标签页 解决跨域 Canvas 污染问题
				// “Canvas 污染”，即在使用跨域图像绘制到 <canvas> 上时，浏览器会禁止导出图像数据
				//设置图像的 crossOrigin 属性为 "anonymous"  确保当图片来自不同的源时，不会因为同源策略而阻止访问
				image.setAttribute("crossOrigin", "anonymous");
				// 为图像设置 onload 事件处理器，当图像加载完成时执行其中的代码
				// 确保在 onload 回调之前设置 image.src
				image.src = this.$refs.picurl.src;
				image.onload = function () {
					var canvas = document.createElement("canvas");
					canvas.width = image.width;
					canvas.height = image.height;
					// 获取 <canvas> 的 2D 绘图上下文，以便可以在上面绘图。
					var context = canvas.getContext("2d");
					// 将图像绘制到 <canvas> 上，参数分别为要绘制的图像、起始位置 (x, y) 和图像的尺寸 (width, height)
					context.drawImage(image, 0, 0, image.width, image.height);
					//将 <canvas> 中的内容转换为 PNG 格式的数据 URL
					// var url = canvas.toDataURL("image/png");
					// 使用 toBlob 方法生成 Blob 对象
					canvas.toBlob((blob) => {
						if (blob) {
						    // 创建一个临时的 URL 表示该 Blob 对象
						    const url = URL.createObjectURL(blob);
						
							// 生成一个a元素
							const a = document.createElement("a");
							a.style.display = 'none';
							document.body.appendChild(a);
										
							// 将a的download属性设置为我们想要下载的图片名称
							a.download = 'GirlAndCat' || "下载图片";
							// 将生成的URL设置为a.href属性
							a.href = url;
										
							// 触发a的单击事件
							a.click();
							// 下载完成后释放URL对象
							setTimeout(() => {
								URL.revokeObjectURL(url);
								document.body.removeChild(a);
							}, 0);
						}
					},"image/png")
					
					
					// // 生成一个a元素
					// var a = document.createElement("a");
					// // 创建一个单击事件
					// var event = new MouseEvent("click");
					
					// // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
					// a.download = 'GirlAndCat'|| "下载图片";
					// // 将生成的URL设置为a.href属性
					// a.href = url;
					
					// // 触发a的单击事件
					// a.dispatchEvent(event);
				}
				// image.src = document.getElementById('picurl').src;
				// 确保在 onload 回调之前设置 image.src
				// image.src = this.$refs.picurl.src;
			},
			
			selectClick(index){
			  console.log(index) 
			}
		}
	}
</script>

<style>
.content {
		display: flex;
		height: 100vh;
		/* flex-direction: column; */
		align-items: center;
		justify-content: center;
		background-color: #e5e5e5;
	}

	.logo {
		height: 600rpx;
		width: 700rpx;
		/* margin-top: 0%; */
		margin-left: auto;
		margin-right: auto;
		/* margin-bottom: 50rpx; */
	}
</style>
